<template>
  <div id="app">
    
    <a-layout>
      <a-layout-content id="f">
        <div class="form-container">
          <a-form 
            :label-col="labelCol" 
            :wrapper-col="wrapperCol" 
            ref="formRef" 
            class="beautiful-form ant-form ant-form-horizontal"
          >
     
            <a-form-item label="账号">
              <a-input 
                v-model:value="modelRef.name" 
                placeholder="请输入您的账号"
              />
            </a-form-item>

      
            <a-form-item label="密码">
              <a-select 
                v-model:value="modelRef.region" 
                placeholder="请选择密码区域"
              >
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="用户类型">
              <a-radio-group v-model:value="modelRef.userType">
                <a-radio value="1">教师</a-radio>
                <a-radio value="2">管理员</a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item 
              class="submit-btn-container"
              :wrapper-col="{ span: 24 }"
            >
              <a-button 
                type="primary" 
                @click.prevent="onSubmit" 
                class="wide-btn"
              >
                立即提交
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-layout-content>
    </a-layout>
    <router-view></router-view>
   
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const formRef = ref(null);
    const modelRef = reactive({
      name: '',
      region: undefined,
      userType: undefined, // 关键修改：用户类型改为单选值
    });

    const onSubmit = () => {
      formRef.value.validateFields((err) => {
        if (!err) {
          console.log('提交数据:', modelRef);
        }
      });
    };

    return {
      labelCol: { span: 6, order: 1 },
      wrapperCol: { span: 16, order: 2 },
      formRef,
      modelRef,
      onSubmit,
    };
  },
});
</script>

<style>
html, body, #app, .ant-layout, .ant-layout-content {
  height: 100%;
  margin: 0;
}

.ant-layout-content {
  background-image: url('../../img/login.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.form-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  padding: 20px;
  box-sizing: border-box;
}

.beautiful-form {
  background: rgba(179, 192, 201, 0.8);
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  color: white;
}

.ant-form-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.ant-form-item-label {
  flex: none;
  width: auto;
  text-align: right;
  font-weight: 500;
  color: white;
}

.ant-input,
.ant-select {
  flex: 1;
  min-width: 200px;
  border-radius: 8px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
}

.ant-radio-wrapper {
  color: white;
  margin-right: 24px;
}

.ant-radio-checked .ant-radio-inner {
  border-color: #1890ff;
}

.ant-radio-checked .ant-radio-inner::after {
  background-color: #1890ff;
}

.submit-btn-container .ant-form-item-control {
  display: flex;
  justify-content: center;
}
.wide-btn {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  border-radius: 10px;
  background-color: #0050b3;
  transition: transform 0.2s;
  display: flex;  /* 添加flex布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

.wide-btn:hover {
  transform: scale(1.05);
  background-color: #003a8c;
}

@media (max-width: 576px) {
  .beautiful-form {
    padding: 30px 20px;
  }
  
  .wide-btn {
    width: 80%;
  }
}
</style>